// src/components/popups/sponsorTable/companyContactsByCompanyId/SearchForm.tsx

import { useState } from 'react';
import type { FC } from 'react';

interface SponsorContactsSearchFormProps {
  onSearch: (params: SponsorContactsSearchParams) => void;
  sponsorId?: number;
}

export interface SponsorContactsSearchParams {
  sponsorId: number;
  kc?: boolean;
  inv?: boolean;
}

const SearchForm: FC<SponsorContactsSearchFormProps> = ({ onSearch, sponsorId: initialSponsorId }) => {
  const sponsorId = initialSponsorId || 0;
  const [kc, setKc] = useState<boolean | undefined>(undefined);
  const [inv, setInv] = useState<boolean | undefined>(undefined);

  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    onSearch({ sponsorId, kc, inv });
  };

  return (
    <form
      onSubmit={handleSubmit}
      className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-3 sm:gap-4 items-end text-xs sm:text-sm md:text-base bg-white dark:bg-slate-900 rounded-2xl shadow p-4 border border-gray-200 dark:border-slate-800"
    >
      {/* Company ID */}
      <div>
        <label className="text-gray-800 dark:text-cyan-300 font-semibold block mb-1 text-xs sm:text-sm md:text-base">Company ID</label>
        <input
          type="text"
          value={sponsorId}
          readOnly
          className="w-full border rounded-lg px-3 py-2 shadow-sm bg-gray-50 dark:bg-slate-800 text-gray-600 dark:text-gray-400 cursor-not-allowed transition text-xs sm:text-sm md:text-base border-gray-200 dark:border-slate-700"
          min="0"
        />
      </div>

      {/* KC Filter */}
      <div>
        <label className="text-gray-800 dark:text-cyan-300 font-semibold block mb-1">KC Filter</label>
        <select
          value={kc === undefined ? '' : String(kc)}
          onChange={(e) => setKc(e.target.value === '' ? undefined : e.target.value === 'true')}
          className="w-full border rounded-lg px-3 py-2 shadow-sm focus:ring-2 focus:ring-blue-400 dark:focus:ring-cyan-700 focus:border-blue-400 dark:focus:border-cyan-700 transition text-xs sm:text-sm md:text-base bg-white dark:bg-slate-800 text-gray-800 dark:text-gray-100 border-gray-200 dark:border-slate-700"
        >
          <option value="">All</option>
          <option value="true">Yes</option>
          <option value="false">No</option>
        </select>
      </div>

      {/* INV Filter */}
      <div>
        <label className="text-gray-800 dark:text-cyan-300 font-semibold block mb-1">INV Filter</label>
        <select
          value={inv === undefined ? '' : String(inv)}
          onChange={(e) => setInv(e.target.value === '' ? undefined : e.target.value === 'true')}
          className="w-full border rounded-lg px-3 py-2 shadow-sm focus:ring-2 focus:ring-blue-400 dark:focus:ring-cyan-700 focus:border-blue-400 dark:focus:border-cyan-700 transition text-xs sm:text-sm md:text-base bg-white dark:bg-slate-800 text-gray-800 dark:text-gray-100 border-gray-200 dark:border-slate-700"
        >
          <option value="">All</option>
          <option value="true">Yes</option>
          <option value="false">No</option>
        </select>
      </div>

      {/* Submit Button */}
      <div className="sm:col-span-2 lg:col-span-3 flex justify-center mt-2">
        <button
          type="submit"
          className="bg-blue-600 dark:bg-cyan-700 text-white px-8 py-2 rounded-lg shadow-md hover:bg-blue-700 dark:hover:bg-cyan-800 focus:ring-2 focus:ring-blue-400 dark:focus:ring-cyan-700 transition text-base font-bold tracking-wide text-xs sm:text-sm md:text-base"
        >
          Search
        </button>
      </div>
    </form>
  );
};

export default SearchForm; 